<template>
    <div class="initiate">
        <div class="top">
            <div></div>
            <p>发起流程</p>
            <div></div>
        </div>
        <div class="center">
            <p>
                <span>名称:</span> <span><el-input v-model="input" style="width: 500px" placeholder="请输入名称" /></span>
            </p>
            <p>
                <span>状态:</span> <span><el-select v-model="value" class="m-2" style="width: 500px" placeholder="请选择状态">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select></span>
            </p>
            <p>
                <span>城市:</span> <span><el-select v-model="value1" class="m-3" style="width: 500px" placeholder="请选择城市">
                <el-option
                v-for="item in options1"
                :key="item.value1"
                :label="item.label1"
                :value="item.value1"
                />
            </el-select></span>
            </p>
            <p>
                <span>日期:</span> 
                <span>
                    <el-date-picker
                    v-model="value3"
                    style="width: 500px"
                    type="date"
                    placeholder="请选择日期"
                    :size="size"
                    />
                </span>
            </p>
            <p>
                <span>备注:</span>
                <span>
                    <el-input
                    v-model="textarea"
                    :rows="2"
                    type="textarea"
                    placeholder="请输入备注"
                    style="width: 500px"
                    />
                </span>
            </p>
        </div>
        <div class="bottom">
            <el-button type="primary" @click="open">提交</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
// 名称
const input = ref('')
const value = ref('')
// 状态
const options = [
    {
        value: '是',
        label: '是',
    },
    {
        value: '否',
        label: '否',
    }
]
// 城市
const options1 = [
    {
        value1: '上海市',
        label1: '上海市',
    },
    {
        value1: '北京市',
        label1: '北京市',
    },
    {
        value1: '南京市',
        label1: '南京市',
    },
    {
        value1: '成都市',
        label1: '成都市',
    },
]
// 日期
const value3 = ref('')
// 备注
const textarea = ref('')
// 提交按钮方法
const open = () => {
  ElMessage('您并未激活相应权限.')
}
</script>
<style scoped lang='scss'>
.initiate{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top{
        display: flex;
        align-items: center;
        div{
            width: 260px;
            border-top: 1px solid #CCC;
        }
        p{
            padding: 5px;
            margin: 0 20px;
            font-size: 14px;
        }
    }
    .center{
        width: 600px;
        margin: 30px 0 10px 0;
        p{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            span{
                margin: 0 5px;
                font-size: 14px;
            }
        }
    }
}
</style>